<template>
	<view style="width: 100%;height: 100%;">
		<!-- 头部 -->
		<view class="theme-container" style="position: relative;">
			<view :style="{height: sConf.tH+'px'}"></view>
			<view class="top-font-title"
				style="font-size: x-large;font-weight: bolder;padding: 35px 0;color: #fff;text-align: center;">
				{{title}}
			</view>
			<tn-subsection v-model="curTabs" @change="EventAction">
				<tn-subsection-item v-for="(item,index) in tabsData" :key="index" :title="item"></tn-subsection-item>
			</tn-subsection>
		</view>
		<view class="mainContent">
			<view style="display: flex;justify-content: space-between;align-items: center;padding: 5px;">
				<view style="color:#888;display: flex;align-items: center;gap: 30px;">
					<view :class="{'action':filter===0}" @click="sortChange(0)">综合</view>
					<view :class="{'action':filter===1}" @click="sortChange(1)">销量</view>
					<view :class="{'action':filter===2}" @click="sortChange(2)">新品</view>
					<view style="display: flex;align-items: center;" @click="sortChange(3)">
						<view :class="{'action':filter===3}"> 价格 </view>
						<view style="display: flex;flex-direction: column;">
							<tn-icon name="up-triangle" offset-top="15"
								:color="filter===3&&sort?'#00b09b':'#888'"></tn-icon>
							<tn-icon name="down-triangle" offset-top="-10"
								:color="filter===3&&!sort?'#00b09b':'#888'"></tn-icon>
						</view>
					</view>
				</view>
				<view style="padding: 0 5px;" @click="()=>{this.line=!this.line}">
					<tn-icon v-if="line" name="menu-list"></tn-icon>
					<tn-icon v-else name="menu-more"></tn-icon>
				</view>
			</view>
			<scroll-view scroll-y @scrolltolower="lastPage" style="height: 70vh;padding: 5px;">
				<tn-empty v-if="tmpData.length === 0" mode="data"></tn-empty>
				<template v-if="line">
					<template v-for="(pages,index) in tmpData" :key="index">
						<TnListItem v-for="(item,index) in pages" :key="index">
							<sub-product-card :line="line" :data="item" :card="curTabs===0" :point="curTabs===1"
								:master="curTabs===2" @puctPlay="EventNavProduct" />
						</TnListItem>
					</template>
				</template>
				<tn-water-fall v-else :data="mergeTwoArray(tmpData)" mode="calc">
					<template #left="{ item }">
						<sub-product-card :line="line" :data="item" :card="curTabs===0" :point="curTabs===1"
							:master="curTabs===2" @puctPlay="EventNavProduct" />
					</template>
					<template #right="{ item }">
						<sub-product-card :line="line" :data="item" :card="curTabs===0" :point="curTabs===1"
							:master="curTabs===2" @puctPlay="EventNavProduct" />
					</template>
				</tn-water-fall>
				<view style="height: 50px;"></view>
			</scroll-view>
		</view>
		<!-- 顶部自定义导航 -->
		<tn-navbar :placeholder="true" fixed bg-color="#FFFFFF00" text-color="#fff">
			<tn-search-box v-model="searchValue" placeholder="请输入搜索内容" shape="round" :border="false"
				:search-button="false" size="sm"
				style="background-color: #f1f1f1;width: 100%;border-radius: 10px;margin: 0 5px;" />
		</tn-navbar>
	</view>
</template>

<script>
	import utils from '@/common/utils';
	export default {
		data() {
			return {
				count: null, // 记录数
				size: 20, // 页大小
				page: 1, // 当前页
				maxPage: 1, // 最大数
				title: '兑换中心',
				sConf: getApp().globalData,
				searchValue: '',
				curTabs: 0,
				tabsData: ['兑换券', '积分兑换', '红包抵扣'],
				filter: 0, //筛选
				sort: true, // 排序
				line: true, // 单行显示
				tmpData: [], // 主要数据
			}
		},
		onLoad(args) {
			const state = Number(args.state || 0);
			this.curTabs = state;
			this.loadDefData(state)
		},
		onReady() {

		},
		methods: {
			/**
			 * 排序
			 */
			sortChange(e) {
				if (e < 3) {
					this.filter = e
				} else {
					if (this.filter === 3) {
						this.sort = !this.sort
					} else {
						this.filter = 3
					}
				}
				this.loadDefData(this.curTabs);
			},
			/**
			 * 却换类型事件
			 */
			EventAction(e) {
				console.log('EventAction', e);
				this.count = null; // 记录数
				this.size = 20; // 页大小
				this.page = 1; // 当前页
				this.maxPage = 1; // 最大数	
				this.tmpData = [] // 清空数据
				this.loadDefData(e);
			},
			/**
			 * 初始化
			 */
			loadDefData(e) {
				if (e === 0) {
					this.loadGoodsConverList()
				} else if (e === 1) {
					this.loadGoodsPointList()
				} else if (e === 2) {
					this.loadGoodsMasterList()
				} else {}
			},
			/**
			 * 下一页
			 */
			lastPage() {
				console.log('lastPage');
				if (this.page < this.maxPage) {
					this.page++
					this.loadDefData(this.curTabs)
				}
			},
			/**
			 * 加载兑换券商品
			 */
			loadGoodsConverList() {
				let host = this.sConf.host + '/weapps/product/';
				let token = this.sConf.token || '';
				let data = {
					is_card: 1,
					is_list: 1,
					status: 1,
					page: this.page
				}
				if (this.filter === 1) {
					data.ordering = '-hot'
				}
				if (this.filter === 2) {
					data.ordering = '-id'
				}
				if (this.filter === 3 && this.sort) {
					data.ordering = 'cur_price'
				}
				if (this.filter === 3 && !this.sort) {
					data.ordering = '-cur_price'
				}
				utils.authenticatorList(host, token, data).then((res) => {
					console.log('兑换券商品', res);
					if (res.rescode === 200 && res.resmsg.length > 0) {
						this.tmpData[this.page - 1] = res.resmsg
						this.count = res.count
						this.size = res.size
						this.maxPage = Math.ceil(res.count / res.size)
					}
				});
			},
			/**
			 * 加载积分兑换商品
			 */
			loadGoodsPointList() {
				let host = this.sConf.host + '/weapps/product/';
				let token = this.sConf.token || '';
				let data = {
					is_points: 1,
					is_list: 1,
					status: 1,
					page: this.page
				}
				if (this.filter === 1) {
					data.ordering = '-hot'
				}
				if (this.filter === 2) {
					data.ordering = '-id'
				}
				if (this.filter === 3 && this.sort) {
					data.ordering = 'cur_price'
				}
				if (this.filter === 3 && !this.sort) {
					data.ordering = '-cur_price'
				}
				utils.authenticatorList(host, token, data).then((res) => {
					console.log('积分兑换商品', res);
					if (res.rescode === 200 && res.resmsg.length > 0) {
						this.tmpData[this.page - 1] = res.resmsg
						this.count = res.count
						this.size = res.size
						this.maxPage = Math.ceil(res.count / res.size)
					}
				});
			},
			/**
			 * 加载额度兑换商品
			 */
			loadGoodsMasterList() {
				let host = this.sConf.host + '/weapps/product/';
				let token = this.sConf.token || '';
				let data = {
					is_master: 1,
					is_list: 1,
					status: 1,
					page: this.page
				}
				if (this.filter === 1) {
					data.ordering = '-hot'
				}
				if (this.filter === 2) {
					data.ordering = '-id'
				}
				if (this.filter === 3 && this.sort) {
					data.ordering = 'cur_price'
				}
				if (this.filter === 3 && !this.sort) {
					data.ordering = '-cur_price'
				}
				utils.authenticatorList(host, token, data).then((res) => {
					console.log('额度兑换商品', res);
					if (res.rescode === 200 && res.resmsg.length > 0) {
						this.tmpData[this.page - 1] = res.resmsg
						this.count = res.count
						this.size = res.size
						this.maxPage = Math.ceil(res.count / res.size)
					}
				});
			},
			/**
			 * 拍平数组
			 */
			mergeTwoArray(e) {
				return e.flat()
			},
			/**
			 * 产品详情页
			 */
			EventNavProduct(e) {
				console.log('EventNavProduct', e);
				uni.navigateTo({
					url: '/pagec/product/product?gid=' + e + '&mode=' + this.curTabs
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.action {
		color: $uni-color-banner;
	}
</style>